import React, { useState, useEffect } from 'react'
import axios from 'axios'
import LeftTitle from './components/LeftTitle'
import RightView from './components/RightView'

/**
 * 类组件       （有状态 state）
 * 函数组件 -> 展示组件 （没有状态组件）
 * 16.8 之前
 * 函数组件 增加了一套代码 reack hook => 注入在函数组件中，充当 状态，生命周期
 *
 * useState： 定义并且保存状态
 * useEffect: 模拟生命周期
 *
 * 组件的封装思想：
 */

const TabBar = () => {
  const [list, setList] = useState([])
  const [tabIndex, setTabIndex] = useState(0)
  const [children, setChildren] = useState([])

  // useEffect 当第二个参数，为[], 相当于 componentDidMount
  useEffect(() => {
    const fetchData = async () => {
      const data = await axios.post('/api/post-test')
      console.log('data:', data.data.data.list)
      setList(data.data.data.list)
      setChildren(data.data.data.list[0].children)
    }
    fetchData()
  }, [])

  useEffect(() => {
    // componentDidUpdate
    console.log(list, 'list')
  }, [list])

  return (
    <div>
      <LeftTitle
        list={list}
        tabIndex={tabIndex}
        handleTabClick={(index, item) => {
          setTabIndex(index)
          setChildren(item.children)
          // this.setState({ tabIndex: index, children: item.children })
        }}
      />

      <RightView
        children={children}
        handleRemoveClick={(index) => {
          const copy = [...this.state.children]
          copy.splice(index, 1)
          setChildren(copy)
          // this.setState({ children: copy })
        }}
      />
    </div>
  )
}

export default TabBar

// export default class TabBar extends Component {
//   state = {
//     list: [],
//     tabIndex: 0,
//     children: [],
//   }

//   async componentDidMount() {
//     const data = await axios.post('/api/post-test')
//     console.log('data:', data.data.data.list)
//     this.setState({ list: data.data.data.list, children: data.data.data.list[0].children })
//   }

//   render() {
//     const { list, tabIndex, children } = this.state
//     return (
//       <div>
//         <LeftTitle
//           list={list}
//           tabIndex={tabIndex}
//           handleTabClick={(index, item) => {
//             this.setState({ tabIndex: index, children: item.children })
//           }}
//         />

//         <RightView
//           children={children}
//           handleRemoveClick={(index) => {
// state：只读数据  this.state.list.splice() state this.setState({})
//             const copy = [...this.state.children]
//             copy.splice(index, 1)
//             this.setState({ children: copy })
//           }}
//         />
//       </div>
//     )
//   }
// }
